<template>
    <div class="bi-tab-item"   :style="{display:focusValue?'block':'none'}">
        <slot></slot>
    </div>
</template>


<script>

export default{
    emits:['focus','blur'],
    inject:['addTab','switchTab','delTab','showTab'],
    data(){
        return{
            id:this.name??'tab-'+Math.random().toString(36).slice(2,10),
            focusValue:false
        }
    },
    methods:{
        focus(){
            this.focusValue = true;
            this.switchTab(this.id);
        },
    },
    watch:{
        show(val){
            this.showTab(this.id,val);
        },
        focusValue(val){
            if (val){
                 this.$emit('focus');
            }else{
                this.$emit('blur');
            }
        }
    },
    props:{
        label:{
            type:String,
            default:''
        },
        icon:{
            type:String,
            default:''
        },
        name:{
            type:String,
            name:''
        },
        show:{
            type:Boolean,
            default:true
        },
    },
    unmounted(){
        this.delTab(this.id);
    },
    mounted(){
        this.addTab({
            id:this.id,
            label:this.label,
            icon:this.icon,
            show:this.show
        },(val)=>{
            this.focusValue = val;
        });
    }
}
</script>